import {PageHeaderWrapper} from '@ant-design/pro-layout';
import React from 'react';
import {Card, Col, Row, Skeleton, Spin} from 'antd';
import {connect} from "dva";
import {trigger} from "@/utils/utils";
import {dateFormat, convertDateFromString, currentTime} from "@/utils/time";
import echarts from 'echarts'
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import Pie from '@/pages/GaoLu/components/Pie'
import {DatePicker} from 'antd'
import moment from "moment";
import {addResizeHook} from "@/utils/resize";


class HistoryHistogram extends React.Component {

  extra = {count: 1};

  chart = null;


  charts = {};

  state = {
    display: [],
    hook: this,
    // status: {1: '低', 2: '正常', 3: '正常', 4: '正常', 5: '高'},
    isShow: false,
    // 默认一小时间隔
    startTime: convertDateFromString(localStorage.getItem("scoreQuntileStart")),
    endTime: convertDateFromString(localStorage.getItem("scoreQuntileEnd")),
    option: {
      title: {
        text: '含矾量'
      },
      tooltip: {
        show: true,
        trigger: 'item'
      },
      backgroundColor: '#fff',
      grid: {
        left: '8%',
        top: '15%',
        bottom: '10%'
      },
      series: [{
        type: 'bar',
        barWidth: 11, // 固定柱子宽度
      }],
      xAxis: {
        show: false
      },
      yAxis: {
        min:0,
        max:100,
        show: false
      }
    }
  };


  componentDidMount() {

    const dom = document.getElementById(`lugang_history`);
    const chart = echarts.init(dom);

    this.state.chart = chart;
    chart.setOption(this.state.option);

    chart.showLoading({
      text: '数据正在加载...',
      textStyle: {fontSize: 30, color: '#444'},
      effectOption: {backgroundColor: 'rgba(0, 0, 0, 0)'}
    });
    addResizeHook(this, chart.resize)
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    const {history, ind,time, dispatch} = nextProps;
    // 当传入的type发生变化的时候，更新state
    if (ind && ind !== prevState.ind) {
      dispatch({
        type: 'lugang/getHistory',
        payload: {
          ind,
          "time":dateFormat(time)
        }
      });

      const {option} = prevState;
      option.title.text = ind;

      return {ind}
    }

    if (history && history !== prevState.history) {

      const {chart, option} = prevState;
      const {current, histories} = history;
      if (chart) {
        prevState.hook.initChart(current, histories, chart, option);
        chart.hideLoading()
      }
    }
    // 否则，对于state不进行任何操作
    return {history, ind};
  }

  componentWillUnmount() {
    this.state.chart.dispose();
  }

  initChart = (current, value, chart, option) => {

    const newArray = [];

    let max = 0;

    if (value) {
      for (const [k, v] of Object.entries(value)) {
        newArray.push([k, v]);
        if (v > max) {
          max = v
        }
      }
    }

    option.xAxis = {
      type: 'value',
      splitLine: {
        show: false
      }
    };
    option.yAxis = {
      type: 'value',

      splitLine: {
        show: false
      },
      axisLabel: {
        formatter: '{value}%'
      }
    };

    option.series[0].data = newArray;
    option.series[0].name = "";
    option.series[0].markLine = {
      symbol: "none",
      lineStyle: {               // 警戒线的样式  ，虚实  颜色
        type: "solid",
        color: "#000",
      },
      label: {
        position: 'end',
        formatter: `${current}`
      },
      data: [
        // 配置线端起始点
        [
          {
            coord: [current, 0]
          },
          {
            coord: [current, max]
          }
        ]
      ]
    };
    chart.setOption(option, true);
  };

  timePick = value => {
    this.state.startTime = value[0].toDate();
    this.state.endTime = value[1].toDate();
    localStorage.setItem("scoreQuntileStart", dateFormat(this.state.startTime));
    localStorage.setItem("scoreQuntileEnd", dateFormat(this.state.endTime));

    this.getScoreQuntile(true);
  };

  render() {
    const format = 'YYYY-MM-DD';


    const {
      width = 50,
      height = 300
    } = this.props;

    return (
      <div id='lugang_history' style={{height}}/>
    )
  }
}

export default connect(({lugang, loading}) => ({
  history: lugang.history,
}))
(HistoryHistogram);
